<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="referrer" content="no-referrer"/>
	<title>iStudy-搜索</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-grid.css">

	<!-- Main Styles CSS -->
	<!--    <link rel="stylesheet" type="text/css" href="front/css/main.css">-->
	<!--    <link rel="stylesheet" type="text/css" href="../common/font-awesome-4.7.0/css/font-awesome.min.css">-->
	<style>
		body {
			padding-right: 0px !important;
			background-color: rgb(238, 238, 238);
		}
		.modal-open{
			overflow: auto;
		}

		.navbar {
			margin-bottom: 0px;
			background-color: #FFFFFF;
			box-shadow: 0 0 1em #eee;
			line-height: 55px;
		}

		.banner {
			background-image: url('../iStudy/images/banner.jpg');
			color: white;
		}

		.container-fluid {
			background-color: rgb(51, 113, 214);
		}

		/*以下设置导航栏样式*/
		.newactive {
			background-color: rgb(51, 113, 214);
		}

		.newactive:hover{
			background-image: linear-gradient(to right,rgb(51,113,214) 0%,rgb(117,196,255) 50%,rgb(51,113,214) 100%);
			/*background-color: rgb(72,200,159);*/
		}

		.navbar-inverse {
			border-color: white;
		}

		.navbar-inverse .navbar-nav > li > a{
			color: white;
		}

		/*以下设置阶段样式*/
		.stage-wrap {
			margin-bottom: 20px;
		}

		.stage-sort {
			padding: 0 8px;
			border-radius: 50%;
			background-color: #1E9FFF;
			color: white;
		}

		.stage-title {
			color: #1E9FFF;
			font-weight: 700;
			font-size: 25px;
		}

		/*一下设置课程容器样式*/
		.ui-block {
			padding: 10px;
			background-color: #fff;
			border-radius: 5px;
			border: 1px solid #e6ecf5;
			margin-bottom: 15px;
		}

		.post-thumb {
			margin-bottom: 15px;
		}

		.post-content h4 {
			font-weight: 600;
		}

		.post-thumb img:hover {
			transform: scale(1.1);
		}

		.new-post-additional-info {
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: right;
		}

		/*自定义登录框样式*/
		.login-wrap {
			padding: 20px 30px;
		}

		.modal-header {
			color: #666;
			font-size: 24px;
			font-weight: 600;
			text-align: center;
		}

		.login-btn {
			display: block;
			width: 100%;
		}

		.login-tip {
			text-align: center;
			font-size: 14px;
			color: #1E9FFF;
			letter-spacing: 0;
			line-height: 14px;
		}

		.login-footer {
			color: #808080;
			text-align: center;
		}

		.courseType-title {
			font-size: 20px;
			color: #000;
		}

		/*附加导航栏样式*/
		ul.nav-tabs{
			position: fixed;
			top:auto;
			right: 5%;
			margin-top: 20px;
			border-radius: 4px;
			border: 1px solid #ddd;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
			background-color: #fff;
			z-index: 99;
		}
		ul.nav-tabs li{
			margin: 0;
			border-top: 1px solid #ddd;
		}
		ul.nav-tabs li:first-child{
			border-top: none;
		}
		ul.nav-tabs li a{
			margin: 0;
			padding: 8px 16px;
			border-radius: 0;
		}
		ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
			color: #fff;
			background: #0088cc;
			border: 1px solid #0088cc;
		}
		ul.nav-tabs li:first-child a{
			border-radius: 4px 4px 0 0;
		}
		ul.nav-tabs li:last-child a{
			border-radius: 0 0 4px 4px;
		}
	</style>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal"  style="z-index: 9999;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="login-wrap">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<span class="modal-title" id="myModalLabel">账号登录</span>
				</div>
				<div class="modal-body">
					<form role="form">
						<div class="form-group">
							<input type="text" class="form-control" id="name" placeholder="请输入账号登录" value="admin">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" id="password" placeholder="请输入任意字符的6-18位密码,注意密码不支持更改" value="123456">
						</div>
						<div class="form-group">
							<button type="button" class="btn btn-primary login-btn" onclick="login()">登录</button>
						</div>
						<div class="form-group login-tip">
							未注册账户登录后默认为你创建账号
						</div>
					</form>
				</div>
				<div class="modal-footer login-footer">
					登录即代表你同意<a>用户协议</a>和<a>隐私政策</a>
				</div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<div th:replace="common/bar::#header"></div>
<div class="jumbotron text-center banner" style="margin-bottom:0;margin-top: 55px">
	<h1>iStudy，找到你的登顶之路</h1>
	<p>我们的征途是星辰大海</p>
</div>
<nav class="navbar navbar-inverse" style="line-height: normal">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav">
				<li class="newactive" th:each="courseType:${courseTypes}">
					<a class="courseType-title" th:href="@{index(courseTypeId=${courseType.id})}" th:text="${courseType.title}"></a>
				</li>
				<li class="newactive" th:if="${userInfo}!=null">
					<a class="courseType-title" th:href="@{recommend(id=${userInfo.id})}">为你推荐</a>
				</li>
			</ul>
			<form action="search" method="get" onsubmit="return checkSearch()" class="navbar-form navbar-right"  role="search">
				<div class="form-group">
					<input type="text" id="search" autocomplete="off" name="content" placeholder="输入关键词进行站内搜索"  class="form-control"/>
				</div>
				<button type="submit" class="btn btn-default">查找</button>
			</form>
		</div>

	</div>
</nav>

<div class="container">
	<div class="row" style="margin: 20px auto;">
		<div class="col-sm-12">
			<button type="button" class="btn btn-primary login-btn">
				搜索【
				<span th:if="${content != null}" th:text="${content}" style="color: orange"></span>
				】的结果( 共 <span style="color: orange" th:text="${courses.size()}"></span>条 )
			</button>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12" style="border-left:1px solid rgb(232,232,232)">
			<div class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12"
				 th:each="course:${courses}">
				<!--课程列表 从这里设置移入可以点击-->
				<div class="ui-block">
					<!-- Post -->
					<article>
						<div class="post-thumb">
							<a th:href="@{courseDetail(id=${course.id})}">

								<img th:if="${course.imgUrl!=null}" style="width: 100%;height: 144px"
									 th:src="${course.imgUrl}" alt="photo">
							</a>
						</div>
						<div class="post-content">
							<h4>
								<a th:href="@{courseDetail(id=${course.id})}">
									[(${course.title})]
								</a>
							</h4>

							<p style="color:#999999" th:if="${course.introduce!=null}">
							<div th:if="${#strings.length(course.introduce) gt 10}">
								<a th:href="@{courseDetail(id=${course.id})}">
									摘要：[(${course.title})]...»
								</a>

							</div>
							<div th:if="${#strings.length(course.introduce) le 10}">
								<a th:href="@{courseDetail(id=${course.id})}">
									摘要：[(${course.introduce})]
								</a>
							</div>
							</p>
							<div class="new-post-additional-info">
								<button type="button" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-user">
                                                <a th:href="@{courseDetail(id=${course.id})}" style="color:#fff"
												>
                                                [[${course.readCount}]]人学习过
                                                </a>
                                            </span>
								</button>
							</div>
						</div>
					</article>
					<!-- ... end Post -->
				</div>
			</div>
		</div>
	</div>
</div>

<br>
<div th:replace="common/bar::#footer"></div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="common/js/xtiper.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/login.js"></script>
<script>
	function checkSearch() {
		let search = $('#search').val().trim();
		if (search == ''){
			return false;
		}
		return true;
	}
</script>
</html>